<script lang="ts" setup>
import { ref } from 'vue'
const tabs=ref([
    {
        label:"VR小程序",
    },
    {
        label:"商城系统",
    },
    {
        label:"智慧医疗",
    },
    {
        label:"秒杀拼团",
    },
    {
        label:"点菜拼团",
    }
])

const current = ref<number>(0)
const hoverItemContent = ref<string>('产品描述100字 这款产品是一款高性能的智能手机,拥有强大的处理能力和流畅的操作体验。它采用了最新的技术和设计,拥有精美的外观和轻巧的手感。配备了高清摄像头和大屏幕,能够拍摄出清晰锐利的照片和视频。同时,它还支持快速充电和长久续航,让用户无忧使用。此外,它还内置了丰富的应用程序和功能,可以满足用户的各种...')
const mouserOver = (item:any,index?:number)=>{
    current.value = index
    hoverItemContent.value = item.label
}
</script>

<template>
    <div class="wrapper">
        <div class="top">
            <el-carousel
                motion-blur
                :autoplay="false"
                style="background: #eee;">
                    <el-carousel-item >
                        <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_1.jpg?" alt="" class="width100 height100">
                    </el-carousel-item>
                    <el-carousel-item >
                        <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_3.jpg?" alt="" class="width100 height100">
                    </el-carousel-item>
                    <el-carousel-item >
                        <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_2.png?" alt="" class="width100 height100">
                    </el-carousel-item>
                    <el-carousel-item >
                        <img src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_6_1.jpg?" alt="" class="width100 height100">
                    </el-carousel-item>
            </el-carousel>
            <div class="content">
                <div class="tab flex-start gap30">
                    <div class="tabItem cursor" :class="current==index?'active':''" @mouseover="mouserOver(item)" @click="mouserOver(item,index)" v-for="item,index of tabs" :key="index">{{ item.label }}</div>
                </div>
                <div class="components between ">
                    <div class="descConten between">
                        <img src="https://img0.baidu.com/it/u=2813646527,1969343241&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1719162000&t=157199f7087aea5fee17870bd7814c20" alt="" class="img">
                        <div class="msgBox flex ">
                            
                          {{ hoverItemContent }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="youshi ">
                <div class="title text-center">我们的优势</div>
                <div class="titleLv text-center">用心打造H5,小程序，APP,管理系统</div>
                <div class="list flex-start  wrap">
                    <div class="items flex-column align-center cursor" v-for="item of 3" :key="item">
                        <img src="https://img0.baidu.com/it/u=2196363422,1716819090&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1719162000&t=671c10c12d656341bdff2d3eb3703c9d" alt="" class="log">
                        <div class="itemsTitle">VR小程序</div>
                        <div class="itemsDesc ">
                            企业全面推广，小程序无疑h是最好的利器，微信的得天独厚的属性是传播信息的绝佳方式
                        </div>
                    </div>
                </div>
            </div>

            <div class="youshi ">
                <div class="title text-center">行业应用</div>
                <div class="titleLv text-center">全景市场空间大，适用于线下各行各业</div>
                <div class="listIt flex-start gap30 wrap">
                   <div class="listItem cursor " v-for="item of 7" :key="item">
                        <img class="listItemImg" src="https://img0.baidu.com/it/u=3947596288,4125256321&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1719162000&t=d841c83a264a295a857cd2d69f79aca0" alt="">
                        <div class="hoverItem1 text-center">
                            <div class="desT">房产</div>
                            <div class="es">链接楼上楼下，使人们足不出户身临其境的体验购物的快乐</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- <div class="youshis ">
                <div class="title text-center">更多企业选择乐芒科技</div>
                <div class="titleLv text-center">乐芒科技已经成为全市最优秀选择</div>
                <div class="listIt flex-start gap30 wrap">
                   <div class="listItem cursor " v-for="item of 7" :key="item">
                        <img class="listItemImgs" src="https://img0.baidu.com/it/u=1310541593,187696033&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500" alt="">
                       
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<style lang="scss" scoped>
    @import './index.scss';
</style>